<template>
  <div class="menu-lists">
      <el-card class="!border-none" shadow="never">
          <div>
              <el-button v-perms="['dept/add']" type="primary" @click="handleAdd()">
                  <template #icon>
                      <icon name="el-icon-Plus" />
                  </template>
                  新增
              </el-button>
              <el-button @click="handleExpand"> 展开/折叠 </el-button>
          </div>
          <el-table
              ref="tableRef"
              class="mt-4"
              size="large"
              default-expand-all
              v-loading="pager.loading"
              :data="pager.lists"
              row-key="id"
              :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          >
              <el-table-column
                  label="部门名称"
                  prop="name"
                  min-width="150"
                  show-overflow-tooltip
              />   
              <el-table-column label="状态" prop="is_disable" min-width="100">
                  <template #default="{ row }">
                      <el-tag v-if="row.status == 1">正常</el-tag>
                      <el-tag v-else type="danger">停用</el-tag>
                  </template>
              </el-table-column>
             
              <el-table-column label="排序" prop="sort" min-width="100" />
              <el-table-column label="更新时间" min-width="180">
                <template #default="{ row }"> 
                      {{ $formatDt(row.updatedAt) }}
                  </template>
              </el-table-column>
              <el-table-column label="操作" width="160" fixed="right">
                  <template #default="{ row }">
                      <el-button
                          v-if="row.type !== MenuEnum.BUTTON"
                          v-perms="['dept/add']"
                          type="primary"
                          link
                          @click="handleAdd(row.id)"
                      >
                          新增
                      </el-button>
                      <el-button
                          v-perms="['dept/edit']"
                          type="primary"
                          link
                          @click="handleEdit(row)"
                      >
                          编辑
                      </el-button>
                      <el-button
                          v-perms="['dept/delete']"
                          type="danger"
                          link
                          @click="handleDelete(row.id)"
                      >
                          删除
                      </el-button>
                  </template>
              </el-table-column>
          </el-table> 
      </el-card>
      <edit-popup v-if="showEdit" ref="editRef" @success="getLists" @close="showEdit = false" />
  </div>
</template>
<script  setup name="dept">
import {ref} from 'vue'
import { getDeptList,deleteDept } from '@/apis/system/dept'
import { MenuEnum } from '@/enums/appEnums'
import { usePaging } from '@/hooks/usePaging'
import EditPopup from './edit.vue'
import feedback from '@/utils/feedback'
const tableRef = ref(null)
const editRef = ref(null)
let isExpand = false
const showEdit = ref(false)

const { pager, getLists } = usePaging({
  fetchFun: getDeptList, 
})

const handleAdd = async (id) => {
  showEdit.value = true
  await nextTick()
  if (id) {
      editRef.value?.setFormData({
        parent_id: id
      })
  }
  editRef.value?.open('add')
}

const handleEdit = async (data) => {
  showEdit.value = true
  await nextTick()
  editRef.value?.open('edit')
  editRef.value?.getDetail(data)
}

const handleDelete = async (id) => {
  await feedback.confirm('确定要删除？')
  await deleteDept({ id })
  getLists()
}

const handleExpand = () => {
  isExpand = !isExpand
  toggleExpand(pager.lists, isExpand)
}

const toggleExpand = (children, unfold = true) => {
  for (const key in children) {
      tableRef.value?.toggleRowExpansion(children[key], unfold)
      if (children[key].children) {
          toggleExpand(children[key].children, unfold)
      }
  }
}

getLists()
</script>
